<template>
  <div>
    <el-card class="card">
      <div slot="header">
        <el-button type="primary" @click="add">新增</el-button>
      </div>
      <div>
        <el-table :data="adList" border style="width: 100%">
          <el-table-column fixed type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column label="广告图片" width="120">
            <template slot-scope="scope">
              <div>
                <img :src="scope.row.pic" alt="" class="pic" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="时间" width="250">
            <template slot-scope="scope">
              <div>开始时间：{{ scope.row.startTime }}</div>
              <div>结束时间：{{ scope.row.endTime }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="广告名称" width="120">
          </el-table-column>
          <el-table-column prop="clickCount" label="点击数"> </el-table-column>
          <el-table-column prop="orderCount" label="下单数" width="120">
          </el-table-column>
          <el-table-column label="轮播位置" width="120">
            <template slot-scope="scope">
              <p v-if="scope.row.type === 0">首页轮播</p>
              <p v-else>其他</p>
            </template>
          </el-table-column>
          <el-table-column prop="url" label="链接地址" width="120">
          </el-table-column>
          <el-table-column prop="note" label="备注" width="120">
          </el-table-column>
          <el-table-column label="上下线状态" width="120">
            <template slot-scope="scope">
              <p>
                {{ scope.row.status === 1 ? "上线" : "下线" }}
              </p>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="100">
            <template slot-scope="scope">
              <el-button @click="editAds(scope.row)" type="text" size="small"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                style="color: red"
                @click="del(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-dialog width="65%" title="广告详情" :visible.sync="open">
      <el-form
        ref="form"
        :rules="rules"
        :inline="true"
        class="demo-form-inline"
        :model="form"
        label-width="100px"
      >
        <el-form-item
          size="mini"
          style="width: 45%"
          prop="name"
          label="广告名称"
        >
          <el-input
            v-model="form.name"
            class="item_input"
            placeholder="广告名称"
          />
        </el-form-item>
        <el-form-item size="mini" style="width: 45%" label="备注">
          <el-input v-model="form.note" class="item_input" placeholder="备注" />
        </el-form-item>

        <el-form-item size="mini" style="width: 45%" label="排序">
          <el-input v-model="form.sort" class="item_input" placeholder="排序" />
        </el-form-item>
        <el-form-item size="mini" style="width: 45%" label="产品数量">
          <el-input
            v-model="form.productCount"
            class="item_input"
            placeholder="产品数量"
          />
        </el-form-item>
        <el-form-item size="mini" style="width: 45%" label="链接">
          <el-input v-model="form.url" class="item_input" placeholder="链接" />
        </el-form-item>

        <el-form-item size="mini" style="width: 45%" label="首页轮播位置">
          <el-select
            v-model="form.type"
            class="search-input item_input"
            size="small"
            clearable
            placeholder="订单状态"
          >
            <el-option label="APP首页轮播" value="0" />
            <el-option label="1" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item style="width: 45%" label="开始时间">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="开始时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item style="width: 45%" label="结束时间">
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
          />
        </el-form-item>
        <el-form-item size="mini" style="width: 45%" label="上下线状态">
          <el-switch
            v-model="form.status"
            :active-value="1"
            :inactive-value="0"
            class="item_input"
          />
        </el-form-item>

        <el-form-item size="mini" style="width: 45%" label="图片">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="uploadHeaders"
            multiple
            :on-success="addImg"
            ref="uploadTi"
          >
            <img v-if="form.pic" :src="form.pic" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="open = false">取 消</el-button>
        <el-button size="small" type="primary" @click="onSubmit"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { findAd, delAds, addAds, updateAds } from "@/api/market";
import mixin from "@/minx/index";
export default {
  props: {},

  mixins: [mixin],
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
      },
      adList: [],
      open: false,
      form: {
        pic: "",
        name: "",
        note: "",
        productCount: "",
        sort: "",
        url: "",
        status: 0,
        type: "1",
        startTime: "",
        endTime: "",
      },
      adsInfo: {},
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  watch: {},
  methods: {
    async init() {
      this.adList = (await findAd()).data.items;
      // console.log(this.adList);
    },
    editAds(el) {
      this.adsInfo = el;
      this.open = true;
      if (this.adsInfo) {
        this.form = el;
      } else {
        this.form={}
      }
    },
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delAds(id).then((res) => {
            if (res.success) {
              this.init();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    add() {
      this.open = !this.open;

      this.adsInfo=undefined

    },
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.$confirm(
            `是否确认${this.adsInfo ? "修改" : "新增"}广告?`,
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          )
            .then(() => {
              if (!this.adsInfo) {

                addAds(this.form).then((res) => {
                   console.log(res)
                  if (res.success) {
                    this.open = false;
                    this.$message.success("添加成功");
                    this.init();
                     this.form={}

                  }
                });
              } else {
                updateAds(this.form).then((res) => {
                  if (res.success) {
                    this.open = false;
                    this.$message.success("更新成功");
                    this.init();
                     this.form={}
                  }
                });
              }
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消",
              });
            });
        }else {
                    this.$message.error('请填写必要信息')
                    return false
                }
      });
    },
    addImg(res) {
      // console.log(res)
      this.$refs.uploadTi.clearFiles();
      this.form.pic = res.data.fileUrl;
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.card {
  width: 90%;
  margin: 0 auto;
  margin-top: 30px;
  .pic {
    width: 100px;
    height: 100px;
  }
}
.item_input {
  width: 300px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
